<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="register-box">
        <div id="step-1">
          <h2 class="title">企业认证</h2>
          <form
            id="step-1-form"
            action=""
            method=""
            autocomplete="off"
            v-if="status == 'NO'"
          >
            <el-form
              :model="dataForm"
              :rules="rules"
              :inline="true"
              ref="ruleForm"
              label-width="120px"
              class="demo-ruleForm form-group"
              label-position="top"
            >
              <div class="input-group">
                <el-form-item label="法人名称" prop="ceoName">
                  <el-input
                    type="text"
                    v-model="dataForm.ceoName"
                    placeholder="请输入法人名称"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="法人身份证" prop="ceoId">
                  <el-input
                    type="text"
                    v-model="dataForm.ceoId"
                    placeholder="请输入法人身份证"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="公司名称" prop="userName">
                  <el-input
                    type="text"
                    v-model="dataForm.userName"
                    placeholder="请输入公司名称"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="单位类型" prop="corpType">
                  <el-select v-model="dataForm.corpType" placeholder="请选择">
                    <el-option
                      v-for="item in unitOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="企业注册类型" prop="corpRegisterType">
                  <el-select
                    v-model="dataForm.corpRegisterType"
                    placeholder="请选择"
                    @change="selectCorpRegisterType(dataForm.corpRegisterType)"
                  >
                    <el-option
                      v-for="item in companyRegisterTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="input-group">
                <el-form-item :label="labelCode" prop="certificateId">
                  <el-input
                    type="text"
                    v-model="dataForm.certificateId"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="联系人姓名" prop="contactName">
                  <el-input
                    type="text"
                    v-model="dataForm.contactName"
                    placeholder="请输入联系人姓名"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <el-form-item label="联系人身份证" prop="contactId">
                  <el-input
                    type="text"
                    v-model="dataForm.contactId"
                    placeholder="请输入联系人身份证"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="input-group">
                <div class="rule clearfix">
                  <div class="select-icon fl" @click="isArgee = !isArgee">
                    <img
                      src="../../assets/img/select.png"
                      alt=""
                      v-if="isArgee"
                    />
                    <img src="../../assets/img/noSelect.png" alt="" v-else />
                  </div>
                  <div class="fl">
                    <span>请阅读并同意</span>
                    <a href="javascript:;" @click="lookRuleType(3)"
                      >《隐私权政策协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(1)"
                      >《e签宝服务协议》</a
                    >
                    <a href="javascript:;" @click="lookRuleType(2)"
                      >《数字证书协议》</a
                    >
                  </div>
                </div>
              </div>
              <div class="btn-footer clearfix">
                <input
                  type="button"
                  value="认 证"
                  class="sub fl"
                  @click="toNextSecond(1)"
                />
                <input
                  type="button"
                  value="返回"
                  class="back fr"
                  @click="$router.go(-1)"
                />
              </div>
            </el-form>
          </form>
          <!--认证成功-->
          <div class="status-success clearfix" v-if="status == 'YES'">
            <img src="../../assets/img/succ.png" alt="" class="fl" />
            <div class="status-right fl">
              <p>当前账号认证已经完毕：认证通过！</p>
              <nuxt-link to="/">返回首页 》</nuxt-link>
              <img
                src="../../assets/img/statusOne.png"
                alt=""
                class="status-one"
              />
            </div>
          </div>
          <!--认证失败-->
          <div class="status-success clearfix" v-if="status == 'FAIL'">
            <img src="../../assets/img/fail02.png" alt="" class="fl" />
            <div class="status-right fl">
              <p>当前账号认证已经完毕：认证未通过！</p>
              <nuxt-link to="/">返回首页 》</nuxt-link>
              <p class="go-on" @click="status = 'NO'">继续认证</p>
              <img
                src="../../assets/img/statusOne.png"
                alt=""
                class="status-one"
              />
            </div>
          </div>
          <!--认证失败-->
          <div class="status-success clearfix" v-if="status == 'GONING'">
            <img src="../../assets/img/succ.png" alt="" class="fl" />
            <div class="status-right fl">
              <p>当前账号认证进行中，请等待</p>
              <nuxt-link to="/">返回首页 》</nuxt-link>

              <img
                src="../../assets/img/statusOne.png"
                alt=""
                class="status-one"
              />
            </div>
          </div>
        </div>
      </div>
      <div style="height:50px"></div>
    </div>
    <FooterPage></FooterPage>
    <el-dialog
      :title="
        ruleType == 1
          ? 'e签宝服务协议'
          : ruleType == 2
          ? '数字证书协议'
          : '隐私权政策协议'
      "
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <eRule v-if="ruleType == 1"></eRule>
      <DCRule v-else-if="ruleType == 2"></DCRule>
      <privateRule v-else></privateRule>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import selectMock from "../../components/selectMock";
import navPage from "../../components/nav";
import { isCardID, phone } from "../../plugins/validate";
import eRule from "./eRule";
import DCRule from "./DCRule";
import privateRule from "./privateRule";
import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    selectMock,
    navPage,
    eRule,
    DCRule,
    privateRule
  },
  data() {
    var cardValidate = (rule, value, callback) => {
      isCardID(rule, value, callback);
    };

    return {
      dialogVisible: false,
      ruleType: 1, //规则类型
      isArgee: false, //是否同意协议
      dataForm: {
        ceoName: "", //法人名称
        ceoId: "", //法人身份证号
        certificateId: "", //营业执照代码(统一社会信用代码号)
        contactId: "", //联系人身份证号
        contactName: "", //联系人名称
        userName: "", // 公司名称
        corpType: "0", //单位类型
        corpRegisterType: "NORMAL" //企业注册类型
      },
      status: "NO",
      rules: {
        ceoName: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],
        corpRegisterType: [
          { required: true, message: "请输选择企业类型", trigger: "blur" }
        ],
        corpType: [
          { required: true, message: "请输选择单位类型", trigger: "blur" }
        ],
        contactName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],
        contactId: [
          { validator: cardValidate, trigger: "blur", required: true }
        ],
        ceoId: [{ validator: cardValidate, trigger: "blur", required: true }],
        certificateId: [
          {
            required: true,
            message: "请输入统一社会信用代码号",
            trigger: "blur"
          },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ]
      },
      merchantTypeList: [],
      loading: false,
      unitOptions: [
        {
          value: "0",
          label: "普通企业"
        },
        {
          value: "1",
          label: "社会团体"
        },
        {
          value: "2",
          label: "事业单位"
        },
        {
          value: "3",
          label: "民办非企业单位"
        },
        {
          value: "4",
          label: "党政及国家机构"
        }
      ],
      labelCode: "组织机构代码号",
      companyRegisterTypeOptions: [
        {
          value: "NORMAL",
          label: "组织机构代码号"
        },
        {
          value: "MERGE",
          label: "多证合一"
        },
        {
          value: "REGCODE",
          label: "企业工商注册码及其他"
        }
      ]
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    // 查看协议
    lookRuleType(index) {
      this.dialogVisible = true;
      this.ruleType = index;
    },
    // 选择企业类型
    selectCorpRegisterType(val) {
      console.log(val);
      if (val == "MERGE") {
        this.labelCode = "统一社会信用代码";
      } else if (val == "REGCODE") {
        this.labelCode = "企业工商注册码及其他";
      } else {
        this.labelCode = "组织机构代码号";
      }
    },
    getDetail() {
      this.$http(
        "get",
        "/sys/user/getUser.do?userId=" + Cookie.get("user")
      ).then(res => {
        if (res.code == "0000") {
          //NO: 未认证, YES: 已认证, GONING: 进行中, FAIL: 认证失败
          this.status = res.result.identityStatus;
        }
      });
    },
    toNextSecond(index) {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.isArgee) {
            this.loading = true;
            this.$http(
              "post",
              "/sys/user/corp3keys.do",
              this.dataForm,
              "json"
            ).then(res => {
              if (res.code == "0000") {
                this.$message({
                  type: "success",
                  message: "认证时间较长，请过一段时间，查看认证结果"
                });
                setTimeout(() => {
                  this.$router.push("/");
                }, 30000);
              }
              this.loading = false;
            });
          } else {
            this.$message({
              type: "error",
              message: "请勾选并阅读协议"
            });
            console.log("error submit!!");
            return false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.status-success {
  margin-left: 100px;
  padding-bottom: 200px;
  margin-top: 80px;
}
.status-success .status-right {
  margin-left: 20px;
  position: relative;
}
.status-right p:nth-child(1) {
  width: 288px;
  height: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #4a4a4a;
  line-height: 25px;
  margin-bottom: 5px;
}
.status-right a:nth-child(2) {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #ee781b;
  line-height: 20px;
}
.go-on {
  width: 120px;
  height: 30px;
  border: 1px solid #ee781b;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #ee781b;
  line-height: 30px;
  margin-top: 10px;
  cursor: pointer;
}
.go-on:hover {
  color: #fff;
  background: #f48d06;
}
.status-one {
  position: absolute;
  left: -87px;
  top: 135px;
}
.title {
  font-size: 18px;
  color: #4a4a4a;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
}
.register-box {
  width: 1200px;
  margin: 10px auto;
  background: #fff;
  padding: 20px 0 40px 0;
  height: auto;
}
#step-1 {
  width: 520px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-2 {
  width: 520px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-1 .input-group {
  position: relative;
  height: 60px;
}
#step-1 .input-group .inner-box {
  height: 50px;
  line-height: 50px;
  position: relative;
}
#step-1 .input-group .inner-box .lable {
  font-size: 14px;
  display: inline-block;
  width: 135px;
  text-align: right;
  margin-right: 15px;
  color: #000000;
  height: 36px;
  line-height: 36px;
  font-weight: 600;
}
#step-1 .input-group .inner-box .phone {
  width: 333px;
  height: 35px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  text-indent: 10px;
  font-size: 14px;
}
.sendSms {
  border: 0;
}
.sendSms:active {
  border: 0;
}

#step-1 .input-group .inner-box .wrapper {
  width: 250px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  position: relative;
}
#step-1 .input-group .inner-box .wrapper .v-code {
  width: 148px;
  height: 35px;
  box-sizing: border-box;
  vertical-align: middle;

  border: 1px solid #e7e7e7;
  font-size: 14px;
  vertical-align: middle;
}

#step-1 .input-group .inner-box .wrapper .box {
  display: inline-block;
  width: 91px;
  height: 35px;
  background: #ffe7e7;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  color: #d0021b;
  font-size: 14px;
  vertical-align: middle;
  margin-left: 6px;
}
#step-1 .input-group .inner-box .wrapper .box img {
  width: 100px;
  height: 35px;
}
#step-1 .input-group .inner-box .wrapper .box.box:hover {
  cursor: pointer;
}
#step-1 .input-group .inner-box .wrapper p {
  display: block;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: -130%;
  font-size: 16px;
  display: none;
}
#step-1 .input-group .inner-box .wrapper p .fa {
  color: #2998e5;
}

#step-1 .input-group .warning .fa {
  margin-right: 8px;
}
#step-1 .sub {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  width: 246px;
  height: 44px;
  background: #f48d06;
  border-radius: 4px;
}
#step-1 .sub:hover {
  opacity: 0.8;
}
#step-1 .back {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  color: #f48d06;
  cursor: pointer;
  width: 246px;
  height: 44px;
  border: 1px solid #f48d06;
  border-radius: 4px;
}
#step-1 .back:hover {
  background: #f48d06;
  color: #fff;
}
#step-1 .sub[disabled] {
  background: #aaaaaa !important;
  cursor: not-allowed;
}
#step-1 input[disabled] {
  cursor: not-allowed;
}
</style>
<style>
.input-group .el-form-item {
  width: 100%;
}
.input-group .el-form-item__content {
  width: 333px;
  height: 35px;
  display: inline-block !important;
}
.input-group .el-input__inner {
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  width: 333px;
  height: 35px;
  font-size: 14px;
}
.input-group .el-form-item__label {
  font-size: 14px;
  display: inline-block;
  width: 155px;
  text-align: right;
  margin-right: 15px;
  color: #000000;
  height: 36px;
  line-height: 36px;
  font-weight: 600;
}
.input-group .rule img {
  width: 15px;
  height: 15px;
}
.select-icon {
  margin-right: 5px;
}
.input-group .rule a:hover {
  color: #f48d06;
}
</style>